<template>
  <el-dialog
    width="1000px"
    :visible.sync="visible"
    :close-on-click-modal="false"
    title="工种类型"
    class="craft"
  >
    <!-- 新增 -->
    <div class="new-craft">
      <el-form
        :inline="true"
        :model="formData"
        :rules="formDataRules"
        ref="craftForm"
        label-width="120px"
        @submit.native="save()"
      >
        <el-form-item label="新增工种类型" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 工种类型列表 -->
    <el-table
      :data="craftList.filter(x => !search || x.name.toLowerCase().includes(search.toLowerCase()))"
      height="400"
      border
    >
      <el-table-column align="center" type="index" label="序号" width="100"></el-table-column>
      <el-table-column align="center" label="创建时间" prop="createTime" width="200"></el-table-column>
      <el-table-column align="center" label="工种名称" prop="name" width="200">
        <template slot="header" slot-scope="scopeHeader">
          <el-input v-model="search" clearable placeholder="工种名称" />
          <label v-if="scopeHeader"></label>
        </template>
        <template slot-scope="scope">
          <el-input
            v-if="scope.row.isEdit"
            v-model="scope.row.name"
            :ref="scope.row.id"
            @change="editorValChanged(scope.row)"
            @keyup.enter.native="editorBlur(scope.row)"
            @blur="update(scope.row)"
          />
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="setEdit(scope.row)">修改</el-button>
          <el-button type="text" @click="deleteById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  name: 'craft',
  data() {
    return {
      visible: false,
      formData: {
        name: ''
      },
      formDataRules: {
        name: [{ required: true, message: '请填写工种名称' }]
      },
      search: ''
    }
  },
  methods: {
    init() {
      this.$store.dispatch('user/loadCraftList')
      this.newFormName = ''
      this.visible = true
      this.$nextTick(() => this.$refs.craftForm.resetFields())
    },
    editorValChanged(craft) {
      this.$set(craft, 'hasChanged', true)
    },
    editorBlur(craft) {
      this.$refs[craft.id].blur()
    },
    async setEdit(craft) {
      let canUpdate = await this.canModify(craft.id)
      if (canUpdate) {
        this.$set(craft, 'isEdit', true)
        this.$nextTick(() => this.$refs[craft.id].focus())
      } else {
        this.$notify.warning({
          title: '警告',
          message: '当前工种已绑定人员，不可修改'
        })
      }
    },
    async canModify(craftId) {
      let res = await this.$http({
        method: 'post',
        url: this.$http.adornUrl(`/usercenter-admin/user/craft/info/${craftId}`)
      })

      if (res && res.code === 200) {
        return res.data.canUpdate
      }
      return false
    },
    async save() {
      let valid = await this.$refs.craftForm.validate()
      if (!valid) return

      let res = await this.$http({
        method: 'post',
        url: this.$http.adornUrl('/usercenter-admin/user/craft/save'),
        data: { name: this.formData.name }
      })

      if (res && res.code === 200) {
        this.$refs.craftForm.resetFields()
        this.$notify.success({ title: '成功', message: '新增工种类型成功' })
        this.$store.dispatch('user/loadCraftList')
      } else {
        this.$notify.error({ title: '错误', message: res.msg })
      }
    },
    async update(craft) {
      if (!craft.hasChanged) {
        craft.hasChanged = false
        craft.isEdit = false
        return
      }

      let res = await this.$http({
        url: this.$http.adornUrl('/usercenter-admin/user/craft/update'),
        method: 'post',
        data: {
          id: craft.id,
          name: craft.name
        }
      })

      if (res && res.code === 200) {
        craft.isEdit = false
        this.$notify.success({ title: '成功', message: '保存工种类型成功' })
        this.$store.dispatch('user/loadCraftList')
      } else {
        this.$notify.error({
          title: '错误',
          message: res.msg
        })
      }
    },
    async deleteById(craftId) {
      let confirm = await this.$confirm('您确认删除当前工种类型吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
      if (confirm !== 'confirm') return

      let res = await this.$http({
        url: this.$http.adornUrl(`/usercenter-admin/user/craft/delete`),
        method: 'post',
        data: { id: craftId }
      })

      if (res && res.code === 200) {
        this.$store.dispatch('user/loadCraftList')
        this.$notify.success({ title: '成功', message: '删除工种类型成功' })
      } else {
        this.$notify.error({ title: '错误', message: res.msg })
      }
    }
  },
  computed: {
    craftList() {
      let a = this.$store.getters['user/craftList']
      let craftList = JSON.parse(JSON.stringify(a))
      return craftList
    }
  },
  created() {
  }
}
</script>

<style>
</style>
